let path = require('path');
let HtmlWebpackPlugin = require("html-webpack-plugin");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");//抽析多个css文件为一个文件
let OptimizeCss=require('optimize-css-assets-webpack-plugin');//css优化项  引用这个包必须引用uglifyjs-webpack-plugin，不然不压缩js
let UglifyJsPlugin=require('uglifyjs-webpack-plugin');//js压缩
module.exports = {
    devServer: {//开发服务器的配置
        port: 3000,//端口
        progress: true,//进度
        contentBase: "./build",//根目录
        open: true,//自动打开默认浏览器
        compress: true//传输gzip
    },
    optimization: {//优化项
        minimizer: [
            new UglifyJsPlugin({
                cache: true,//是否缓存
                parallel: true,//是否并发
                sourceMap: true//源码映射
            }),
            new OptimizeCss()
        ]
    },
    mode: 'production',//模式 默认两种模式 production development production模式js自动压缩
    entry: './src/index.js',//入口
    output: {
        filename: 'bundle.[hash:5].js',//打包后的文件
        path: path.resolve(__dirname, 'build')//路径必须一个绝对路径
    },
    plugins: [
        new HtmlWebpackPlugin(
            {
                template: './src/index.html',//模板路径
                filename: "index.html",//输出文件名
                minify: {
                    removeAttributeQuotes: true,//去除双引号
                    collapseWhitespace: true, //打包成一行
                },
                hash: true //文件？hash戳
            }
        ),
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    module: {//模块
        rules: [//规则 css-loader支持@import语法
            //style-loader 插入到head标签中
            //loader的特点 希望单一
            //loader的用法 字符串只一个loader用
            //多个loader需要[]
            //loader的顺序 ，默认是从右向左执行 从下向上执行
            //loader可以写成对象方式
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',//@import
                    'postcss-loader'//自动加前缀
                ]
            },
            {
                //
                test: /\.less/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',//@import
                    'postcss-loader',//自动加前缀
                    'less-loader'//less -> css
                ]
            }
        ]
    }
}